<template>
    <div class="set-video">
        <div class="panel panel-default">
            <!-- Table -->
            <div class="panel-body">
                <button class="" @click="addBtn()">新增</button>
            </div>
            <table class="items-list table">
                <thead>
                <tr>
                    <th>视频名</th>
                    <th>视频图</th>
                    <th>视频链接</th>
                    <th>视频点击数</th>
                    <th>创建时间</th>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody>
                <tr class="add_temp" v-if="temp.name">
                    <td><input type="text" v-model="temp.name"></td>
                    <td class="video_img">
                        <div><img v-bind:src="temp.pic" @click="setImage(temp)"></div>
                       <!-- <p>图片地址:<input v-model="temp.pic" type="text"></p>-->
                    </td>
                    <td><input type="text" v-model="temp.src"></td>
                    <td></td>
                    <td></td>
                    <td>
                        <button class="" @click="addOk(temp)">保存</button>
                        <button class="cancelbtn" @click="addCancel(temp)">取消</button>
                    </td>
                </tr>
                <tr v-for="item in items.list">
                    <td><input type="text" v-model="item.name"></td>
                    <td class="video_img">
                        <div><img v-bind:src="item.pic" @click="setImage(item)"></div>
                       <!-- <p>图片地址:<input v-model="item.pic" type="text"></p>-->
                    </td>
                    <td><input type="text" v-model="item.src"></td>
                    <td>{{item.count}}</td>
                    <td>{{item.create_time}}</td>
                    <td>
                        <button class="edit" @click="save(item)">修改</button>
                        <button class="cancelbtn" @click="del(item)">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="footer">
            <pagination :total-items="items.total"
                        :curr-page="params.pageNo"
                        :size-page="params.pageSize"
                        prev-show="2"
                        next-show="2"
                        @pageChange="pageChange">
            </pagination>
        </div>
    </div>
</template>
<script>
    import pagination from 'admin/js/common/pagination.vue';
    import imageSelect from 'admin/js/common/image-select.vue';

    export default{
        data() {
            return {
                params:{
                    pageNo: 1,
                    pageSize: 10
                },
                items: {
                    loading: true,
                    total: 0,
                    list: []
                },
                temp: {}
            }
        },
        methods: {
            setImage(item){
                var self = this;
                //这是个动态实时加载的组件
                var imageS = Vue.extend(imageSelect);
                imageS = new imageS;

                imageS.temp = {
                    config: {
                        title: '图片选择',
                        content: '',
                        style: {
                            width: 920
                        }
                    }
                };

                imageS.item_img = item.pic;

                $(".app").append(imageS.$mount().$el);
                imageS.$on("pic-change", function (item_img) {
                    item.pic = item_img;
                    //self.save(item);
                });

            },
            pageChange(i){
                var self = this;
                self.params.pageNo = i;
                this.getVideo();
                $('.right').scrollTop(0);
            },
            addBtn(){
                this.temp = {
                    name: '视频名',
                    pic: '',
                    src: ''
                };
            },
            addOk(item){
                this.save(item);
                this.temp = {};
            },
            addCancel(){
                this.temp = {};
            },
            del(item){
                var self = this;
                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.deleteVideo,
                    dataType: 'json',
                    data: {
                       id:item.id
                    },
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            self.getVideo();
                        }
                    }
                });
            },
            save(item){
                var self = this;
                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.saveVideo,
                    dataType: 'json',
                    data: {
                        id: item.id,
                        pic : item.pic,
                        name : item.name,
                        src : item.src
                    },
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            self.getVideo();
                        }
                    }
                });
            },
            getVideo:function(){
                var self = this;
                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.getVideo,
                    dataType: 'json',
                    data: self.params,
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            self.items.list = response.data.list;
                            self.items.total = response.data.total;
                            self.items.loading = false;
                        }
                    }
                });
            }
        },
        created(){
            this.getVideo();
        },
        components: {
            pagination,
            imageSelect
        }

    }
</script>

<style lang="less">
    .set-video {
        position: relative;

        input {
            width: 200px;
        }

        th {
            border-bottom:none 0;
        }

        td {
            vertical-align: middle !important;
        }

        .add_temp {
            background-color: #eee;
        }

        .video_img {


            div {
                width: 100px;
                height: 100px;
                cursor: pointer;
                //padding-left: 60px;
            }
            img{
                width:100px;
                height: 100px;
            }
        }
    }
</style>

